<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="radio" v-model="picked" value="C#" id="C#">
    <label>C#</label><br>
    <input type="radio" v-model="picked" value="Java" id="Java">
    <label>Java</label><br>
    <input type="radio" v-model="picked" value="C++" id="C++">
    <label>C++</label><br>
    <input type="radio" v-model="picked" value="Go" id="Go">
    <label>Go</label><br>
    <p>选择的是:{{ picked }}</p>

    <hr>

    <input type="checkbox" v-model="checked">
    <label>选择状态:{{ checked }}</label>
    <hr>
    <input type="checkbox" v-model="check" value="C#">
    <label>C#</label><br>
    <input type="checkbox" v-model="check" value="Java">
    <label>Java</label><br>
    <input type="checkbox" v-model="check" value="C++">
    <label>C++</label><br>
    <input type="checkbox" v-model="check" value="Go">
    <label>Go</label><br>

    <label>选中的内容:{{ check }}</label><br>
    <hr>
    <select v-model="selected" multiple>
        <option>html</option>
        <option value="es6">js</option>
        <option>css</option>
    </select>
    <p>选择的项:{{ selected }}</p>
    <hr>
    <select v-model="select" multiple>
        <option v-for="option in options" :value="option.value">{{ option.text }}</option>
    </select>
    <p>选择的项:{{ select }}</p>
    <hr>

    <label>lazy加载</label>
    <input type="text" v-model.lazy="message">{{ message }}<br>

    <label>数字格式</label>
    <input type="text" v-model.number="number">{{ typeof number }}<br>
    <label>trim</label>
    <input type="text" v-model.trim="trim">{{ trim.length }}<br>
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            picked: 'C#',
            checked: false,
            check: ['Go', 'C#'],
            selected: 'html',
            options: [
                {text: 'java', value: 'JAVA'},
                {text: 'c', value: 'C'},
                {text: 'es6', value: 'ES6'},
                {text: 'go', value: 'GO'}
            ],
            select: '',
            message: '',
            number: 0,
            trim: ''


        }
    })
</script>
</html>
